<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
	<title>我要预约</title>
	<script type="text/javascript" src="js/init.js"></script>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/appoint.css">
</head>
<body>
	<div class="appoint-main">
		<form id="appoint-form">	
			<div class="select-item">
				<div class="select-title orange">选择线下办理地点</div>
				<div class="select-con orange">
					<input type="text" value="" placeholder="六盘水市妇幼保健院" name="" readonly><i></i>
					<div class="select-list hide">
						<a href="javascript:;" class="list-item" data-value="1">六盘水市妇幼保健院</a>
						<a href="javascript:;" class="list-item" data-value="1">六盘水市人民医院</a>
						<a href="javascript:;" class="list-item" data-value="1">德江县人民医院</a>
						<a href="javascript:;" class="list-item" data-value="1">德江县民族中医院</a>
						<a href="javascript:;" class="list-item" data-value="1">盘县第二人民医院</a>
					</div>
				</div>		
				<div class="all-h"><img src="images/all-h.png"/><span>查看全部站点</span></div>
				<div class="clear"></div>
			<div class="all-h-box hide">
			<table border="1px">
				<tr><th class="col-one">地区</th><th class="col-two">网点</th><th class="col-three">地址</th><th class="col-four">联系电话</th></tr>
				<tr><td>贵阳</td><td>贵阳青果小站（总部）</td><td>贵州省贵阳市观山湖区都匀路109号</td><td>0851-85820796</td></tr>
			</table>
			</div>			
		</div>
			<input type="submit" name="" value="提交" class="submit">
			<input type="button" name="" value="取消" class="cancel">
		</form>

	</div>	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {	
			var $list = $(".select-list");
			$(".select-con input, .select-con>i").click(function() {
				if($list.hasClass("hide")) {					
					$list.show();
				}else {
					$list.hide();
				}
			})

			$(".select-list a").click(function() {
				$(".select-con input").val($(this).text());
				$(".select-list").hide();
			})
			$(".all-h").click(function(){
				if($(".all-h-box").hasClass("hide")){
					$(".all-h-box").removeClass("hide");
				}else{
					$(".all-h-box").addClass("hide");
				}
			})
		})
	</script>
</body>
</html>